<template>
  <div class="confirm-pay-wrapper">
    <el-dialog :close-on-click-modal="false" :show-close='true' @close='canclePay' :visible="payConfirm" top="260px" center>
      <p class="confirm-pay-text">请在新打开的页面完成支付</p>
      <p class="confirm-pay-colse">支付完成前，请不要关闭此窗口</p>
      <div class="btn-wrapper el-pay-page">
        <a @click.once="countConsult" :href="`http://wpa.qq.com/msgrd?v=3&uin=${QQNum}&site=qq&menu=yes`" target="_blank" class="button" @click="canclePay">支付遇到问题</a>
        <el-button class="button" type="primary" @click="paySucceed">已完成支付</el-button>
      </div>
      <p class="other-pay">
        <a @click="canclePay" class="text" href="#">选择其他支付方式<span>></span></a>
      </p>
    </el-dialog>
  </div>
</template>
<script>
import { orderPaySuccess, infoByTel, statisticsSave } from 'api/getData'
import { mapGetters, mapActions } from 'vuex'
export default {
  data() {
    return {
      // payConfirm: false
    };
  },
  props: ['payConfirm', 'orderSn'],
  computed: {
    ...mapGetters(['currentUser', 'cityId', 'cityName', 'QQNum'])
  },
  methods: {
    ...mapActions(['setFirstPayBool', 'setUser']),
    getInfoByTel() {
      infoByTel(this.currentUser.account).then(res => {
        this.currentUser.type = res.data.type;
        this.currentUser.cluesOrStuId = res.data.cluesOrStuId;
        this.setUser(this.currentUser)
      })
    },

     countConsult(){
      let userId = this.currentUser && this.currentUser.cluesOrStuId || '',
        account = this.currentUser && this.currentUser.account || '',
        cityId = this.cityId && this.cityId || '',
        cityName = this.cityName && this.cityName || ''

      statisticsSave(cityId, cityName, userId, account)
    },

    canclePay() {
      this.$emit('canclePay');
      //更改学员状态
      infoByTel(this.currentUser.account).then(res => {
        this.currentUser.type = res.data.type;
        this.currentUser.cluesOrStuId = res.data.cluesOrStuId;
        this.setUser(this.currentUser)
      })
      //查询是否支付成功
      orderPaySuccess(this.orderSn).then(res => {
        if (res.data.remarks == '0') { // 刷新时查看是否成功 0 是成功
          // this.$alert('该订单已完成支付', '提示', {
          //   confirmButtonText: '确定',
          //   showClose: false,
          //   callback: action => {
          //     this.$router.push({
          //       path: '/personal',
          //       query: { flag: '1' }
          //     })

          //   }
          // });
          this.setFirstPayBool(true)
          return
        }
      })
    },
    paySucceed() {
      this.$emit('payConfirmFn', false);
      //更改学员状态
      infoByTel(this.currentUser.account).then(res => {
        this.currentUser.type = res.data.type;
        this.currentUser.cluesOrStuId = res.data.cluesOrStuId;
        this.setUser(this.currentUser)
      })
      orderPaySuccess(this.orderSn).then(res => {
        if (res.data.remarks == '0') {
          this.setFirstPayBool(true)
          this.$router.push({
            path: '/home',
          })
        } else if (res.data.remarks == '1' || res.data.remarks == '2') {
          this.$alert('该订单未完成支付', '提示', {
            confirmButtonText: '关闭'
          });
        }
      })


    }
  }
};

</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base';
@import '~style/reset';

.confirm-pay-text
  padding-left: 35px;
  text-align: left;
  font-size: 20px;
  @media (min-width: 1920px)
    font-size: 26px;
  font-weight: bold;
  color: $color-background;


.confirm-pay-colse
  padding-left: 35px;
  text-align: left;
  margin-top: 20px;
  font-size: $font-size-medium-x;
  @media (min-width: 1920px)
    font-size: $font-size-large;
  color: $color-person-btn;


.btn-wrapper {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

.el-button--default {
  background-color: $color-text;
  color: $color-theme;
}

.el-button--default:hover {
  background-color: $color-text;
  color: $color-theme;
}
</style>
